<template>
    <el-container>
        <el-header class='el-header'>
            <el-steps :active="1" align-center finish-status="success"
            style="width:600px;margin-left:auto;margin-right:auto;margin-top:40px;">
                <el-step title="STEP 1" description="上传对话音频文件"></el-step>
                <el-step title="STEP 2" description="完成音频分析"></el-step>
                <el-step title="STEP 3" description="进行图谱构建"></el-step>
            </el-steps>
        </el-header>

        <el-main class="main">
            <el-table
                :show-header="false"
                :data="dialogue"
                class="mt-10"
                fit
                empty-text="暂无数据"
                :highlight-current-row="true"
                style="margin:auto;width:80%;"
                max-height="350px"
            >
                <el-table-column align="center">
                    <template slot-scope="scope">
                    <template>
                        <el-tag :type="scope.row.type">{{scope.row.speaker}}</el-tag>
                    </template>
                    </template>
                </el-table-column>
                <el-table-column
                v-for="(item, index) in table_title"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                >
                </el-table-column>

            </el-table>
            <el-button type="info" round style="margin-top:20px;" @click="speechMIE" :loading="loadingbut" :icon="btnIcon">
                {{loadingbutText}}
            </el-button>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            dialogue: [],
            table_title:[
                {
                    prop: 'sent',
                    label: '属性',
                    width: '100',
                    titleAlign: 'center',
                    columnAlign: 'center',
                },
            ],
            loadingbut:false,
            loadingbutText:"下一步",
            btnIcon:" ",
        }
    },
    created() {
        this.getRouterData()
    },
    methods: {
        getRouterData(){
            this.dialogue = this.$route.params.dialogue;
            console.log("getRouterData");
            console.log(this.dialogue);
        },
        getFileName(file){
            this.$store.state.fileName=file.name.substring(0,file.name.length-5);
        },
        speechMIE(){
            this.loadingbut = true;
            this.loadingbutText = "分析中...";
            this.btnIcon = "el-icon-loading";
            axios.post("http://localhost:8000/dialogue/speech_mie/",{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                console.log(res);
                var data = res.data.data;
                var links = res.data.links;
                var entities = res.data.entities;
                var relations = res.data.relations;
                this.$router.push({
                    name:'DialogueKgshow',
                    params:{
                        data: data,
                        links: links,
                        entities:entities,
                        relations:relations,
                    }
                })
            });
            this.loadingbut = false;
            this.loadingbutText = "下一步";
            // this.btnIcon = "";
        }
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }

    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }

</style>